<template>
	<view class="container">
		<view class="banner">
			<image src="/static/img/banner.jpg" mode="widthFix" />
			<view class="text">
				<view class="slogan">“走出去享受生活”</view>
				<view class="name mt-30">约翰克鲁伊夫</view>
			</view>
		</view>
		<!-- 描述 -->
		<view class="inspiring p-50" @click="tools.handleJump('About')">
			<view class="title">{{ config.title }}</view>
			<view class="slogan mt-40">{{ config.slogan }}</view>
			<view class="content mt-30">{{ config.description }}</view>
		</view>
		<!-- 风格 -->
		<view class="style mt50">
			<rich-text :nodes="config.style"></rich-text>
		</view>

		<!-- 足球中心 -->
		<view class="football-hub pt-60 pb-60 pl-40 pr-40">
			<view class="title">{{ hub.title }}</view>
			<view class="subtitle mt-40">{{ hub.subtitle }}</view>
			<view class="description mt-30">{{ hub.description }}</view>
			<view class="hub-content">
				<view class="hub-element mt-100">
					<image src="/static/img/hub-interactive.png" mode="widthFix" />
					<view class="mt-50">交互式的</view>
				</view>
				<view class="hub-element mt-100">
					<image src="/static/img/hub-tactical.png" mode="widthFix" />
					<view class="mt-50">战术2D动画</view>
				</view>
				<view class="hub-element mt-100">
					<image src="/static/img/hub-video.png" mode="widthFix" />
					<view class="mt-50">视频</view>
				</view>
				<view class="hub-element mt-100">
					<image src="/static/img/hub-training.png" mode="widthFix" />
					<view class="mt-50">训练课程</view>
				</view>
				<view class="hub-element mt-100">
					<image src="/static/img/hub-content.png" mode="widthFix" />
					<view class="mt-50">定期更新内容</view>
				</view>
			</view>
			<view class="px-80 mt-80">
				<view class="mt-50">
					<uv-button
						text="了解更多"
						shape="circle"
						color="#9CBCE3"
						@click="tools.handleJump('Certification')"
					></uv-button>
				</view>
				<view class="mt-50">
					<uv-button text="登录" shape="circle" color="#8F7A4A"></uv-button>
				</view>
				<view class="mt-50">
					<uv-button
						text="定价"
						shape="circle"
						color="#FFFFFF"
						:customTextStyle="{ color: '#2A2A43' }"
					></uv-button>
				</view>
			</view>
		</view>
		<!-- 教练认证 -->
		<view class="football-coach">
			<view class="title">克鲁伊夫足球教练认证</view>
			<view class="description mt-50">
				加入我们，重新定义卓越的教练塑造足球的未来美丽的游戏。<br />探索我们的认证级别。
			</view>
			<view class="title2 mt-50">
				<image src="/static/img/coach-certification.png" mode="widthFix" />
				<view>克鲁伊夫足球教练官方认证</view>
			</view>
			<view class="description2 mt-50">探索我们的认证级别。</view>

			<view class="levels mt-100">
				<view class="level mb-36" v-for="course in courseList" :key="course.id">
					<view class="head"> {{ course.level }} </view>
					<view class="date mt-20" v-if="course.date">{{ course.date }}</view>
					<view class="body mt-50">
						<view class="title">{{ course.hour }}</view>
						<view class="subtitle mt-30">{{ course.text }}</view>
						<view class="description mt-30" v-if="course.requirement">
							需求<br />
							{{ course.requirement }}
						</view>
					</view>
					<view class="footer mt-100">
						<view style="width: 200rpx">
							<uv-button
								text="立即购买"
								size="small"
								color="#292A43"
								shape="circle"
								@click="tools.handleJump('Course')"
							></uv-button>
						</view>
					</view>
				</view>
			</view>

			<view class="px-80 mt-80">
				<view class="mt-50">
					<uv-button
						text="了解更多"
						shape="circle"
						color="#9CBCE3"
						@click="tools.handleJump('Course')"
					></uv-button>
				</view>
				<view class="mt-50">
					<uv-button text="登录" shape="circle" color="#8F7A4A"></uv-button>
				</view>
				<view class="mt-50">
					<uv-button
						text="定价"
						shape="circle"
						color="#FFFFFF"
						:customTextStyle="{ color: '#2A2A43' }"
					></uv-button>
				</view>
			</view>
		</view>
		<!-- 服务 -->
		<view class="site-services p-40">
			<view class="title">服务</view>
			<view class="service-list mt-50" v-for="service in serviceList" :key="service.id">
				<view class="service mb-80">
					<view class="title">{{ service.title }}</view>
					<view class="text mt-30">{{ service.text }}</view>
					<view class="btn mt-50">
						<uv-button
							text="了解更多"
							shape="circle"
							color="#9CBCE3"
							@click="tools.handleJump('Service')"
						></uv-button>
					</view>
					<view class="img mt-50">
						<image :src="cdnurl + service.image" mode="widthFix" />
					</view>
				</view>
			</view>
		</view>
		<!-- 锦标赛 -->
		<view class="site-tournament px-40">
			<view class="title">{{ tournament.title }}</view>
			<view class="date mt-30">{{ tournament.date }}</view>
			<view class="text mt-30">{{ tournament.text }}</view>
			<view class="btn mt-50">
				<uv-button
					text="了解更多"
					shape="circle"
					color="#9CBCE3"
					@click="tools.handleJump('Tournament', { id: tournament.id })"
				></uv-button>
			</view>
			<view class="img mt-50">
				<image :src="cdnurl + tournament.image" mode="widthFix" />
			</view>
		</view>
		<!-- 博客 -->
		<view class="site-blog mt-100">
			<view class="blog-title">博客</view>
			<view class="blog-list p-40">
				<view class="blog mb-80" v-for="blog in blogList" :key="blog.id">
					<view class="title">{{ blog.title }}</view>
					<view class="text mt-40">{{ blog.text }}</view>
					<view class="img mt-50">
						<image :src="cdnurl + blog.image" mode="widthFix" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getSystemConfig, getHomeData } from '@/api/index';
import { getCdnUrl } from '@/utils/env';
import $tools from '@/utils/common';
export default {
	data() {
		return {
			cdnurl: getCdnUrl(),
			config: {},
			style: '',
			hub: {
				title: '克鲁伊夫足球中心',
				subtitle: '了解背后的秘密位置游戏场景',
				description:
					'进入一个交互式数字中心与Johan保持一致的基本训练克鲁伊夫的阵地战哲学。探索各种视觉效果——图像、2D动画、视频、胶囊和网络研讨会。',
			},
			courseList: [],
			serviceList: [],
			tournament: [],
			blogList: [],
		};
	},
	onShareAppMessage() {},
	onShareTimeline() {},
	onLoad() {
		this.getInit();
	},
	onShow() {
		this.getData();
	},
	methods: {
		getInit() {
			//系统配置
			getSystemConfig().then((res) => {
				console.log(res);
				this.config = res.data;
				this.config.style = $tools.formatRichText(res.data.style);
			});
		},
		getData() {
			getHomeData().then((res) => {
				this.serviceList = res.data.service;
				this.tournament = res.data.tournament;
				this.blogList = res.data.blog;
				this.courseList = res.data.course;
			});
		},
	},
};
</script>

<style lang="scss">
@import 'index.scss';
</style>
